<template>
    <div class="amap-page-container">
      <el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center">
      </el-amap>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;

    }
    .amap-page-container{
    	width:100%;
    	height:100%;
    }
  </style>

  <script>
    module.exports = {
    data() {
        let self = this;
        return {
          center: [121.59996, 31.197646],
          lng: 0,
          lat: 0,
          loaded: false,
          plugin: [{
            pName: 'Geolocation',
            events: {
              init(o) {
                // o 是高德地图定位插件实例
                o.getCurrentPosition((status, result) => {
                  if (result && result.position) {
                    self.lng = result.position.lng;
                    self.lat = result.position.lat;
                    self.center = [self.lng, self.lat];
                    self.loaded = true;
                    self.saveLocation("lng", self.lng);
                    self.saveLocation("lat", self.lat);
                    self.$nextTick();
                  }
                });
              }
            }
          }]
        };
  	},
  	methods:{
  		saveLocation(key, value){
  			localStorage.setItem(key, value);
  		}
 	}
    };
</script>
